<script setup lang="ts">
import { ref, computed } from 'vue';
import { useNursesStore } from '@/store';
import { storeToRefs } from 'pinia';
import { hideLoading, showLoading, usePullDownRefresh, stopPullDownRefresh } from '@tarojs/taro'
import { useRouterPush } from '@/composables';
import { useNurses } from '@/service';
import { useDayjs, } from '@/hooks/common';

const { toNurseExecute } = useRouterPush()

const { getNursesOrders } = useNurses()

const { nurseNurses } = storeToRefs(useNursesStore())

definePageConfig({
    navigationBarTitleText: '护工首页',
    enablePullDownRefresh: true
});
const list = ref()

usePullDownRefresh(() => {
    getData()
    stopPullDownRefresh()
})
async function getData() {

    if (!nurseNurses.value.id) return

    showLoading({ title: "正在请求数据..." })

    const { error, success } = await getNursesOrders(nurseNurses.value.id)

    if (!error && success) {
        list.value = [...success]
    }
    hideLoading()
}

const { $dayjs } = useDayjs()

const date = computed((item: any) => `${$dayjs(item?.begin_date).format('YYYY-MM-DD')}至${$dayjs(item?.end_date).format('YYYY-MM-DD')}`)

</script>

<template>
    <view class="w-375px text-primary  flex-col-center">
        <view class="w-fullh-full flex-col-center ">
            <view class="h-auto w-360px  flex-col-center   ">
                <nut-cell v-if="list?.length > 0" :title="`${list?.length > 0 ? '我的订单:' + list.length : ''}`" center
                    desc=""></nut-cell>
                <nut-empty v-if="!list || list?.length == 0" description="暂无数据"></nut-empty>
                <view v-for="item in list" class=" w-full   flex-col-center b-rounded-2  shadow  bg-#fff mb-2  ">
                    <nut-collapse class="w-full   ">
                        <nut-collapse-item rotate="0" :border="true" :name="item?.id">
                            <template #icon>
                                <view @click.stop="toNurseExecute(item.id)"
                                    class="i-local-right-bold w-30px h-30px text-primary  " />
                            </template>
                            <template #title>
                                <view class="">{{ item?.order_text }}</view>
                                <view class="">{{ date }}</view>
                            </template>
                            <template #value class="text-xl">{{ item?.family_name }}</template>
                            <view class=" w-full ">
                                <view>医院：{{ item.hospital_name }}</view>
                                <view>科室：{{ item.dept_name }}</view>
                                <view>床号：{{ item.bed_name }}</view>
                                <view>病历号：{{ item.record }}</view>
                                <view>联系地址：{{ `${item.area_name}-${item.address}` }}</view>
                                <view>联系人：{{ item.contacts }}</view>
                                <view>手机号码：{{ item.phone }}</view>
                            </view>
                        </nut-collapse-item>
                    </nut-collapse>
                </view>
            </view>
        </view>
    </view>

</template>
<style>
.nut-collapse-item .nut-collapse-item__title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: var(--nut-collapse-item-padding, 10px 16px 10px 6px);
    color: var(--nut-collapse-item-color, #666666);
    font-size: var(--nut-collapse-item-font-size, var(--nut-font-size-2, 14px));
    line-height: var(--nut-collapse-item-line-height, 24px);
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 16px;
}

.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content,
.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-extraWrapper__extraRender,
.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content,
.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-extraWrapper__extraRender {
    display: block;
    padding: 0px 4px;
    color: var(--nut-collapse-wrapper-content-color, #666666);
    font-size: var(--nut-collapse-wrapper-content-font-size, var(--nut-font-size-2, 14px));
    line-height: var(--nut-collapse-wrapper-content-line-height, 1.5);
    background-color: var(--nut-collapse-wrapper-content-background-color, var(--nut-white, #fff));
    border-radius: 16px;
}

.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content--empty,
.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content--empty {
    padding: 0px 6px;
}
</style>